<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="<%=basePath%>static/css/jquery-ui.min.css" />
<link rel="stylesheet" href="<%=basePath%>static/css/jquery-ui-timepicker-addon.min.css" />
<link href="<%=basePath%>static/css/sidebar_css.css" rel="stylesheet" />
<link href="<%=basePath%>bootstrap/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript"
	src="<%=basePath%>static/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" 
	src="<%=basePath%>static/js/jquery-ui.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>static/js/jquery-ui-timepicker-addon.min.js"></script>
<script type="text/javascript">

/* 复选框  */
	$(function(){
		function initTableCheckbox(){
			var $thr=$('table thead tr');
			/* 全选/反选 复选框 */
			var $checkAll= $thr.find('input');
			$checkAll.click(function(event){
				/* 将所有行的选中状态设为全选框的状态 */
				$tbr.find('input').prop('checked',$(this).prop('checked'));
				/* 调整所有选中行的CSS样式 */
				if($(this).prop('checked')){
					$tbr.find('input').parent().addClass('warning');
				}else{
					$tbr.find('input').parent().removeClass('warning');
				}
				/* 阻止向上冒泡，以防再次触发点击操作 */
				event.stopPropagation();
			});
				
			var $tbr=$('table tbody tr');
			/* 点击每一行的选中复选框时 */
			$tbr.find('input').click(function(event){
				/* 调整选中行的css样式 */
				$(this).parent().toggleClass('warning');
				/* 如果已经被选中的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态 */
				$("input[name='checkAll']").prop('checked',$tbr.find('input:checked').length==$tbr.length ? true : false);
				/* 阻止向上冒泡。以防再次触发点击操作 */
				event.stopPropagation();
			});			
			/*点击每一行时也触发该行的选中操作*/
			$tbr.click(function(){
				$(this).find('input').click();
			});
		}
		initTableCheckbox();
		
		//添加
		$("#insertT").click(function(){
			$.ajax({
				url:"<%=basePath%>ticket/insert",
				data:$("#formInsert").serialize(),
				type:"post",
				success:function(result){
					if(result){
						alert("添加成功！");
						search();
					}else{
						alert("添加失败！");
						search();
					}
					$('#myInsertModal').model('hide');
				},
				error:function(data){
					alert("错误"+data);
				}
			});
		});
		
		//删除
		$("#delAll").click(function(){
			var ids=[];
			$("input[name='checkItem']:checked").each(function(){
				ids.push($(this).val());
			});
			alert("请确认是否要删除！");
			$.ajax({
				url:"<%=basePath%>ticket/deleteAll",
				type:"post",
				data:JSON.stringify(ids),
				contentType:"application/json;charset=utf-8",
				success:function(result){
					if(result){
						alert("删除成功!");
						search();
					}else{
						alert("删除失败!");
					}
				},
				error:function(){
					alert("错误，请联系管理员");
				}
			});
		});
		
		//修改
		$("#editT").click(function(){
			$.ajax({
				url:"<%=basePath%>ticket/update",
				data:$("#formEidt").serialize(),
				type:"post",
				success:function(result){
					if(result){
						alert("修改成功！");
						search();			
						$('#myUpdateModal').model('hide');
					}else{
						alert("修改失败！");
						search();
						$('#myUpdateModal').model('hide');
					}		
				},
				error:function(data){
					alert("错误"+data);
				}
			}); 
		});
		
		//车次查询
		$("#searchTicketNo").click(function(){
			search();
		});
		
		//票价查询
		$("#searchTicketPrice").click(function(){
			search();
		});
		
		//站点查询
		$("#searchTicketBySta").click(function(){
			search();
			$('#mySearchModal').model('hide');
		});
	});
	
	$(function() {
		$("#startTime").timepicker({
			showSecond : true,
			timeFormat : 'hh:mm:ss'
		});
		$("#myUpdateModal #startTime").timepicker({
			showSecond : true,
			timeFormat : 'hh:mm:ss'
		});
		
	});
	
	/*通过form表单查找下一页记录 */
	function search(){
		var pageNum=$("#page").val();
		var ticketNo=$('#ticketNo').val();
		var ticketPrice=$('#ticketPrice').val();
		$("#formSearch").submit();
	}
	function to_page(page){
		$("#page").val(page);
		search();
	} 
	
	
	/* 模态框 */
	function toEdit(ticketId){
		$.ajax({
			url:"<%=basePath%>ticket/getTicketById",
			data:{ticketId:ticketId},
			type:"post",
			success:function(result){
				var date=new Date(result.startTime);
				var hour=date.getHours()<10?"0"+date.getHours():date.getHours();
				var min=date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();
				var con=date.getSeconds()<10?"0"+date.getSeconds():date.getSeconds();
				$("#myUpdateModal #ticketId").val(result.ticketId);
				$("#myUpdateModal #ticketNo").val(result.ticketNo);
				$("#myUpdateModal #startStation").val(result.startStation);
				$("#myUpdateModal #endStation").val(result.endStation);
				$("#myUpdateModal #startTime").val(hour+":"+min+":"+con);
				$("#myUpdateModal #ticketNumber").val(result.ticketNumber);
				$("#myUpdateModal #ticketPrice").val(result.ticketPrice);				
				/* alert("成功打开模态框"); */
				$('#myUpdateModal').modal('show');	
			},
			error:function(data){
				alert("错误："+data);
			}
		});
	}
	
	function toInsert(){
		$('#myInsertModal').modal('show');
	}
	
	function toSearch(){
		$('#mySearchModal').modal('show');
	}	

</script>
<style type="text/css">
	.pageyy{
		 float:right;
	}
	.button{
		display: block;
  margin-left: auto;
  margin-right: auto;
	}
	table{
		cursor:pointer;/*光标变小手*/
	}
</style>
<title></title>
</head>
<body>
<h4 style="text-align: center; font-family: 楷体; font-weight: bold;">车票信息管理</h4>
	<div class="container">
		<div class="lay-bd">
			<div class="row">
				<div class="panel panel-default">
  					<div class="panel-heading">		
						<form id="formSearch" action="<%=basePath%>ticket/searchTicketsByCon" method="post">
							<input type="hidden" id="page" name="pageNum" value="${page.pageNum }" />													
							<div class="form-group">
								<div class="input-group input-group-sm">
  									<span class="input-group-addon" id="sizing-addon3">@车次信息</span>
  									<input type="text" class="form-control" id="ticketNo" name="ticketNo" value="${search.ticketNo }" placeholder="请输入车次编号" aria-describedby="sizing-addon3" style="width:150px;">
									&nbsp;
									<button class="btn btn-warning btn-sm" id="searchTicketNo" >车次查询</button>		
									<span class="input-group-addon" id="sizing-addon3">@票价信息</span>
  									<input type="text" class="form-control" id="ticketPrice" name="ticketPrice" placeholder="请输入车票价格" value="${search.ticketPrice }"  aria-describedby="sizing-addon3" style="width:155px;" > 
									&nbsp;
									<button class="btn btn-warning btn-sm" id="searchTicketPrice">票价查询</button>											 										
									</div>
							</div>
							<!-- Modal/查询 --> 
							<div class="modal fade" id="mySearchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
								<div class="modal-dialog" role="document">
							    	<div class="modal-content">					
								    		<div class="modal-header">
								        	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								        	<h4 class="modal-title" id="myModalLabel">车票站点信息查询</h4>  
								      		</div>
								     	<div class="modal-body">
											<div class="form-group">
												<label for="startStation" class="col-sm-2 control-label">始点站</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" id="startStation" name="startStation" value="${search.startStation }" placeholder="请输入始点站。。。">
												</div>
											</div>
											<div class="form-group">
												<label for="endStation" class="col-sm-2 control-label">终点站</label>
												<div class="col-sm-10">
													<input type="text" class="form-control" id="endStation" name="endStation" value="${search.endStation }" placeholder="请输入终点站。。。">
												</div>
											</div>   
								      </div>
								      <div class="modal-footer">
								        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								        <button type="button" class="btn btn-primary" id="searchTicketBySta" >查询</button>
								      </div>							      
							    </div>
							  </div>
							</div>
						</form>
						<button class="btn btn-danger  btn-sm" id="delAll">车票删除</button>
						&nbsp;
						<button type="button"  class="btn btn-warning btn-sm" data-toggle="modal" id="toInsert" onclick="javascript:toInsert();">车票添加</button>			
						&nbsp;
						<button type="button" class="btn btn-warning btn-sm" data-toggle="modal" id="toSearch" onclick="javascript:toSearch();">站点查询</button>
						<br>
						<div class="row">
							<div class="col-md-12">
								<table class="table table-hover">
									<thead>
									<tr class="checkboxsucc" id="ids" >
										<th><input type="checkbox" id="checkAll" name="checkAll" /></th>
										<th>车次</th>
										<th>起始站</th>
										<th>终点站</th>
										<th>发车时间</th>
										<th>车票数量</th>
										<th>车票价格</th>
										<th>操作</th>
									</tr>
									</thead>
									<c:forEach items="${page.list }" var="ticket">
									<tbody>
										<tr>
											<td><input type="checkbox" name="checkItem" value="${ticket.ticketId }"/></td>
											<td>${ticket.ticketNo }</td>
											<td>${ticket.startStation }</td>
											<td>${ticket.endStation }</td>
											<td><fmt:formatDate value="${ticket.startTime }" pattern="HH:mm:ss"/></td>
											<td>${ticket.ticketNumber }</td>
											<td>${ticket.ticketPrice }</td>
											<td><button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#myUpdateModal"
												onclick="javascript:toEdit(${ticket.ticketId});">修改</button>
												</td>	
										</tr>
										</tbody>
									</c:forEach>
								</table>
							</div>
						</div>
				  		 当前第${page.pageNum}页;总共${page.pages}页;总共${page.total}条数据
				  		 <br>
						<nav class="pageyy">
							<ul class="pagination pagination-sm">
								<c:choose>
									<c:when test="${!page.hasPreviousPage}">
										<li class="disabled">
											<a href="javascript:void(0);"aria-label="Previous">
												 <span aria-hidden="true">上一页</span>
											</a>
										</li>
									</c:when>
									<c:otherwise>
										<li>
											<a href="javascript:to_page(${page.pageNum-1});"aria-label="Previous"> 
												<span aria-hidden="true">上一页</span>
											</a>
										</li>
									</c:otherwise>
								</c:choose>
								<c:forEach items="${page.navigatepageNums}" var="item">
									<c:choose>
										<c:when test="${page.pageNum==item}">
											<li class="active">
												<a href="javascript:to_page(${item});">${item}</a>
											</li>
										</c:when>
										<c:otherwise>
											<li>
												<a href="javascript:to_page(${item});">${item}</a>
											</li>
										</c:otherwise>
									</c:choose>
								</c:forEach>
								<c:choose>
									<c:when test="${!page.hasNextPage}">
										<li class="disabled">
											<a href="javascript:void(0);"aria-label="Next"> 
												<span aria-hidden="true">下一页</span>
											</a>
										</li>
									</c:when>
									<c:otherwise>
										<li>
											<a href="javascript:to_page(${page.pageNum+1});"aria-label="Next"> 
												<span aria-hidden="true">下一页</span>
											</a>
										</li>
									</c:otherwise>
								</c:choose>
							</ul>
						</nav>		
						<!-- Modal/添加 --> 
						<div class="modal fade" id="myInsertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<form  id="formInsert" action="<%=basePath %>ticket/insert" method="post">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
											<h4 class="modal-title" id="myModalLabel">车票信息添加</h4>  
										</div>
										<div class="modal-body">
											<div class="form-group">
												<label for="ticketNo" class="col-sm-2 control-label">车次</label>
												<div class="col-sm-10">
												<input type="text" class="form-control" id="ticketNo" name="ticketNo" placeholder="车次">
												</div>
											</div>
										<div class="form-group">
											<label for="startStation" class="col-sm-2 control-label">始点站</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="startStation" name="startStation" placeholder="始点站">
											</div>
										</div>
										<div class="form-group">
											<label for="endStation" class="col-sm-2 control-label">终点站</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="endStation" name="endStation" placeholder="终点站">
											</div>
										</div>
										<div class="form-group">
											<label for="startTime" class="col-sm-2 control-label">发车时间</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="startTime" name="startTime" placeholder="发车时间">
											</div>
										</div>	
										<div class="form-group">
											<label for="ticketNumber" class="col-sm-2 control-label">车票数量</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="ticketNumber" name="ticketNumber" placeholder="车票数量">
											</div>
										</div>
										<div class="form-group">
											<label for="ticketPrice" class="col-sm-2 control-label">车票价格</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="ticketPrice" name="ticketPrice" placeholder="车票价格">
											</div>
										</div>      
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
											<button type="button" class="btn btn-primary" id="insertT" onclick="javascript:insert();">添加</button>
										</div>
									</form>
								</div>
							</div>
						</div>
						<!-- Modal/修改 --> 
						<div class="modal fade" id="myUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
							<div class="modal-dialog" role="document">
						    	<div class="modal-content">
						    		<form  id="formEidt" action="<%=basePath %>ticket/update" method="post">
							    		<div class="modal-header">
							        	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							        	<h4 class="modal-title" id="myModalLabel">车票信息修改</h4>  
							        	<input type="hidden" name="ticketId" id="ticketId" value=>
							      		</div>
							     	<div class="modal-body">
								      	<div class="form-group">
												<label for="ticketNo" class="col-sm-2 control-label">车次</label>
												<div class="col-sm-10">
												<input type="text" class="form-control" id="ticketNo" name="ticketNo" placeholder="车次" disabled="disabled">
												</div>
											</div>
										<div class="form-group">
											<label for="startStation" class="col-sm-2 control-label">始点站</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="startStation" name="startStation" placeholder="始点站">
											</div>
										</div>
										<div class="form-group">
											<label for="endStation" class="col-sm-2 control-label">终点站</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="endStation" name="endStation" placeholder="终点站">
											</div>
										</div>
										<div class="form-group">
											<label for="startTime" class="col-sm-2 control-label">发车时间(请选择当前日期，在修改发车时间)</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="startTime" name="startTime" placeholder="hh:mm:ss">
											</div>
										</div>	
										<div class="form-group">
											<label for="ticketNumber" class="col-sm-2 control-label">车票数量</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="ticketNumber" name="ticketNumber" placeholder="车票数量">
											</div>
										</div>
										<div class="form-group">
											<label for="ticketPrice" class="col-sm-2 control-label">车票价格</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" id="ticketPrice" name="ticketPrice" placeholder="车票价格">
											</div>
										</div>    
							      </div>
							      <div class="modal-footer">
							        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							        <button type="button" class="btn btn-primary" id="editT" onclick="javascript:edit();">提交</button>
							      </div>
						      </form>
						    </div>
						  </div>
						</div>						
	 				</div>
				</div>
			</div>
		</div>	
	</div>			
</body>
